{extend name="public/base" /}

{block name="title"}<title>工具示例</title>{/block}

{block name="pjax_container"}

<style>
    /*百度上传拖拽样式*/
    body {
        font-family: arial;
        background: rgb(242, 244, 246);
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    #elements-container {
        text-align: center;
    }

    .draggable-element {
        display: inline-block;
        width: 100px;
        height: 100px;
        background: white;
        border: 1px solid rgb(196, 196, 196);
        line-height: 20px;
        text-align: center;
        margin: 10px;
        color: rgb(51, 51, 51);
        font-size: 16px;
        cursor: move;
    }
    .drag-list {
        width: 400px;
        margin: 0 auto;
    }
    .drag-list > li {
        list-style: none;
        background: rgb(255, 255, 255);
        border: 1px solid rgb(196, 196, 196);
        margin: 5px 0;
        font-size: 24px;
    }
    .drag-list .title {
        display: inline-block;
        width: 130px;
        padding: 6px 6px 6px 12px;
        vertical-align: top;
    }
    .drag-list .drag-area {
        display: inline-block;
        background: rgb(158, 211, 179);
        width: 60px;
        height: 40px;
        vertical-align: top;
        float: right;
        cursor: move;
    }
    .code {
        background: rgb(255, 255, 255);
        border: 1px solid rgb(196, 196, 196);
        width: 600px;
        margin: 22px auto;
        position: relative;
    }
    .code::before {
        content: 'Code';
        background: rgb(80, 80, 80);
        width: 96%;
        position: absolute;
        padding: 8px 2%;
        color: rgb(255, 255, 255);
    }
    .code pre {
        margin-top: 50px;
        padding: 0 13px;
        font-size: 1em;
    }
    /*百度上传拖拽样式*/
    tr>th,td{
    text-align: center;

}
 
.content-header>.breadcrumb>li{
    color: #999;
}
.content-header>.breadcrumb>.active{
    color: #666;
}
.content-header{
    height: 51px;
 
}
.nav-tabs-custom{
    margin-top: 16px;
}
.btn-primary{
      background-color: #1890FF;
    color: #fff;
    border: none;
    border-radius: 6px !important;
    margin-left: 15px;
    padding: 5px 10px; 
}
.box-primary{
  border-top-color: #ecf0f5 !important;
  border-top-width: 16px;
  
}
.btn-primary:hover{
     background-color: #1890FF;
    color: #fff;
    border: none;
    opacity: .9;
    border-radius: 6px !important; 
}
.delete-one{
    background-color: ff4141 !important;
    margin-left: 15px;
    border-radius: 6px;
    padding: 5px 8px;
}
.sreachs{
       background-color: #1890FF;
    color: #fff;
    border: none;
    border-radius: 6px !important;
    margin-left: 15px;
    padding: 7px 15px; 
}
</style>

<section class="content-header">
    <ol class="breadcrumb">
        <li>示例图片</li>
        <li class="active">工具示例</li>
    </ol>
</section>
<section class="content">
    <div class="row">
        <div class="col-md-12">
            <form class="form-horizontal" method="POST" action="/" onsubmit="return false">
                <input type="hidden" name="id" value="{$info.id|default=0}" />
                <div class="nav-tabs-custom">
                    <ul class="nav nav-tabs">
                        <li class="pull-right"><a href="javascript:history.back(-1)" class="btn btn-sm" style="padding:10px 2px;"><i class="fa fa-list"></i> 返回</a></li>
                    </ul>
                    <div class="tab-content">

                        <!--图标链接-->
                        <a href="https://v3.bootcss.com/components/#glyphicons" target="_blank">图标链接</a><br/><br/><br/>
                        <!--图标链接-->

                        <!--tip提示-->
                        tips提示文字
                        <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>
                        <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>
                        <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
                        <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>
                        <br/><br/><br/>
                        <!--tip提示-->

                        <!--列表部分-->
                        <div class="box-header with-border">
                            <div style="top:10px; width: 30%;float: left; padding: 5px;">
                                {:authAction(CONTROLLER_NAME.'/新建','create')}
                                {:authAction(CONTROLLER_NAME.'/删除','delete_all')}
                                <button type="submit" class="btn btn-default"><i class="glyphicon glyphicon-star-empty"></i> 按钮</button>
                            </div>
                            <div class="box-tools" style="top:10px;">
                                <form action="" method="GET" pjax-search="">
                                    <div class="input-group input-group-sm" style="width:150px;">
                                        <input type="text" name="search" class="form-control pull-right" value="" placeholder="搜索" />
                                        <div class="input-group-btn"><button type="submit" class="btn btn-default sreachs"><i class="fa fa-search"></i></button></div>
                                    </div>
                                </form>
                            </div>
                        </div>
                        <div class="box-body table-responsive">
                            <table class="table table-bordered table-hover">
                                <tr>
                                    <th width="35"><input type="checkbox" class="minimal checkbox-toggle"></th>
                                    <th>用户名</th>
                                    <th>手机</th>
                                    <th>状态</th>
                                    <th>操作</th>
                                </tr>
                                <tr>
                                    <td><input type="checkbox" name="id[]" value="{$v.id}" class="minimal checkbox"></td>
                                    <td>小明</td>
                                    <td>15572173957</td>
                                    <td style="vertical-align:middle">
                                        <a href="javascript:void(0);" data-id="id值" data-field="status"
                                           data-value="状态值" data-url="{:url('status_edit', ['id'=>'id值'])}"
                                           class='editimg fa {if condition="0 == 1 "}fa-check-circle text-green{else /}fa-times-circle text-red{/if}'></a>
                                    </td>
                                    <td>
                                        {:authAction(CONTROLLER_NAME.'/方法名','edit',['id'=>$v['id']])}
                                    </td>
                                </tr>
                            </table>
                        </div>
                        <!--列表部分-->

                        <!--输入框-->
                        <div class="form-group">
                            <label class="col-sm-2 control-label">输入框</label>
                            <div class="col-sm-7"><input class="form-control" name="title" value="" placeholder="提示符"></div>
                        </div>
                        <!--输入框-->


                        <!--复选框-->
                        <div class="form-group">
                            <label class="col-sm-2 control-label">复选框</label>
                            <div class="col-sm-7">
                                <label class="checkbox-inline"><input type="checkbox" name="flag[]" value="c" checked="checked" class="minimal"> 值1</label>
                                <label class="checkbox-inline"><input type="checkbox" name="flag[]" value="a" class="minimal"> 值1</label>
                            </div>
                        </div>
                        <!--复选框-->


                        <!--下拉框1-->
                        <div class="form-group">
                            <label class="col-sm-2 control-label">下拉框1</label>
                            <div class="col-sm-7">
                                <select class="form-control select2" name="select1" style="width:100%;">
                                    <option value="">值1</option>
                                    <option value="">值2</option>
                                    <option value="">值3</option>
                                </select>
                            </div>
                        </div>
                        <!--下拉框1-->

                        {include file="form/switch" title="状态" name="status"/}

                        <!--普通文本框-->
                        <div class="form-group">
                            <label class="col-sm-2 control-label">普通文本框</label>
                            <div class="col-sm-7"><textarea class="form-control" style="resize:none;height:155px;" name="recontent" placeholder="">内容</textarea></div>
                        </div>
                        <!--普通文本框-->


                        <!--即时编辑-->
                        <div class="tab-content">
                            <div class="tab-pane active">
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">即时编辑</label>
                                    <div class="col-sm-7">
                                        <span class="editable" data-pk="字段名" data-name="v" data-url="{:url('site_info_save')}" >字段值</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--即时编辑-->

                        <!--图片上传1-->
                        <div class="form-group">
                            <label class="col-sm-2 control-label">图片上传1 （这种上传一个页面只能有一个，多个会冲突）</label>
                            <div class="col-sm-7 upload-box">
                                <div class="image-box clear">
                                    {if condition="isset($info['img1']) && !empty($info['img1'])"}
                                    <?php
                                    $data = is_array($info['img1']) ? $info['img1'] : [$info['img1']];
                                    ?>
                                    {volist name="data" id="v"}
                                    <section class="image-section">
                                        <div class="image-shade"></div>
                                        <div class="image-delete"></div>
                                        <img class="image-show" src="{$v}" />
                                        <input name="[img1][]" value="{$v}" type="hidden" />
                                    </section>
                                    {/volist}
                                    {/if}
                                    <section class="upload-section">
                                        <div class="upload-btn"></div>
                                        <input type="file" name="file" set-name="[img1]" id="upload-input" value=""/>
                                    </section>
                                </div>
                            </div>
                        </div>
                        <!--图片上传1-->


                        <!--图片上传2-->
                        <div class="form-group">
                            <label class="col-sm-2 control-label">图片上传2</label>
                            <div class="col-sm-7">
                                <div class="input-group">
                                    <input class="form-control" name="litpic" value="" placeholder="" >
                                    <span class="input-group-btn">
                                        <a href="{$data|default='/static/global/face/no-image.png'}" target="_blank" >
                                            <img src="{$data|default='/static/global/face/no-image.png'}" style="height:34px; width:68px;" />
                                        </a>
                                        <button class="btn btn-success btn-flat up-btn" type="button" data-url="{:url('File/store')}">
                                            <i class="fa fa-cloud-upload"> 上传</i>
                                        </button>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <!--图片上传2-->

                        <!--图片上传3-->
                        <div class="form-group">
                            <label class="col-sm-2 control-label">layui上传图片</label>
                            <div class="col-sm-7">
                                <input class="form-control" type="hidden" name="pic3" value=""/>
                                <a href="https://images.unsplash.com/photo-1446704477871-62a4972035cd?fit=crop&fm=jpg&h=100&q=50&w=100" target="_blank">
                                    <img src="https://images.unsplash.com/photo-1446704477871-62a4972035cd?fit=crop&fm=jpg&h=100&q=50&w=100" style="width:50px;height:50px;"/>
                                </a>
                                <button type="button" class="layui-btn" id="pic3">
                                    <i class="layui-icon">&#xe67c;</i>上传图片
                                </button>
                            </div>
                        </div>
                        <!--图片上传3-->

                        <!--元素添加删除-->
                        <div class="form-group">
                            <label class="col-sm-2 control-label">元素添加删除</label>
                            <div class="col-sm-7 my_uploads" style="border:1px solid blanchedalmond;">
                                <div class="col-sm-7" style="margin-bottom:20px;">
                                    <input class="form-control" name="friendship_name[]" value=""><br/>
                                    <input class="form-control" name="friendship_link[]" value=""><br/>
                                    <button class="btn btn-info pull-right" onclick="remove_house(this)">删除元素</button>
                                </div>
                                <button type="button" class="btn btn-info pull-right" style="width:100%;" onclick="add_pic(this)">添加元素</button>
                            </div>
                        </div>
                        <div class="copy_upload" style="display:none;">
                            <div class="col-sm-7" style="margin-bottom:20px;">
                                <input class="form-control" name="friendship_name[]" value=""><br/>
                                <input class="form-control" name="friendship_link[]" value=""><br/>
                                <button class="btn btn-info pull-right" onclick="remove_house(this)">删除元素</button>
                            </div>
                        </div>
                        <!--元素添加删除-->

                        <!--百度上传-->
                        <div class="form-group">
                            <label class="col-sm-2 control-label">百度上传</label>
                            <div class="col-sm-7">
                                <div id="uploader-demo">
                                    <!--用来存放item-->
                                    <div id="fileList" class="uploader-list elements-container"></div>
                                    <div id="filePicker">选择上传</div>
                                </div>
                            </div>
                        </div>
                        <!--百度上传-->

                        <!--百度富文本-->
                        <div class="form-group">
                            <label class="col-sm-2 control-label">百度ue富文本</label>
                            <div class="col-sm-7">
                                <script id="container" name="content" type="text/plain">内容</script>
                            </div>
                        </div>
                        <!--百度富文本-->

                    </div>
                    <div class="box-footer">
                        <div class="col-sm-2"></div>
                        <div class="col-sm-7">
                            <div class="btn-group pull-right">
                                <button type="button" class="btn btn-info pull-right submits" data-loading-text="&lt;i class='fa fa-spinner fa-spin '&gt;&lt;/i&gt; 提交">提交</button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</section>
<script type="text/javascript">

    $(function(){

        // 下拉框1
        $(".select2").select2({language:"zh-CN"});

        // 列表部分 全选
        $('input[type="checkbox"].minimal, input[type="radio"].minimal').iCheck({
            checkboxClass: 'icheckbox_minimal-blue',
            radioClass: 'iradio_minimal-blue'
        });
        $('.checkbox-toggle').on('ifChecked', function(event){
            var _this = $(this);
            var _table = _this.closest('.table');
            _table.find("tr td input[type='checkbox']").iCheck("check");
        });
        $('.checkbox-toggle').on('ifUnchecked', function(event){
            var _this = $(this);
            var _table = _this.closest('.table');
            _table.find("tr td input[type='checkbox']").iCheck("uncheck");
        });

        // 即时编辑
        $('.editable').editable({
            emptytext: "empty",
            params: function(params) {      //参数
                var data = {};
                data['k'] = params.pk;
                data[params.name] = params.value;
                return data;
            },
            success: function(response, newValue) {
                console.log(response);
                var res = $.parseJSON( response );
                if(res.status == 1){
                }else{
                    return res.info;
                }
            }
        });

        //百度上传
        var uploader = WebUploader.create({
            // 选完文件后，是否自动上传。
            auto: true,
            // swf文件路径
            swf: '/__STATIC__/web/webuploader/Uploader.swf',
            // 文件接收服务端。
            server:"{:url('File/store')}",
            // 选择文件的按钮。可选。
            pick: '#filePicker',
            // 只允许选择图片文件。
            accept: {
                /*title: 'Images',
                extensions: 'gif,jpg,jpeg,bmp,png',
                mimeTypes: 'image/!*'*/
            }
        });
        // 当有文件添加进来的时候
        var $list = $('#fileList');
        uploader.on( 'fileQueued', function( file ) {
            var $li = $(
                '<div id="' + file.id + '" class="file-item thumbnail draggable-element" style="display:inline-block;">' +
                '<img><input type="hidden" name="pic[]"/>' +
                '<div class="info">' + file.name + '</div><div onclick="$(this).parent().remove();">删除</div>' +
                '</div>'
                ),
                $img = $li.find('img');
            // $list为容器jQuery实例
            $list.append( $li );
            // 创建缩略图
            uploader.makeThumb( file, function( error, src ) {
                if ( error ) {
                    $img.replaceWith('<span>不能预览</span>');
                    return;
                }
                $img.attr( 'src', src );
            }, 100, 100);
            $('.draggable-element').arrangeable();
        });
        // 文件上传成功，给item添加成功class, 用样式标记上传成功。
        uploader.on( 'uploadSuccess', function( file,response ) {
            $( '#'+file.id ).find('input').val(response.data.saveName);
        });

        // 百度富文本
        var ue_opt = {
            initialFrameHeight: 500
        };
        UE.delEditor('container');
        var my_ue = UE.getEditor('container', ue_opt);

    });

    // 图片上传1
    $("#upload-input").ajaxImageUpload({
        url: "{:url('File/store')}", //上传的服务器地址
        // data: { name:'勾国印' },
        data:{},
        maxNum: 1, //允许上传图片数量
        zoom: true, //允许放大
        allowType: ["gif", "jpeg", "jpg", "bmp",'png','zip'], //允许上传图片的类型
        maxSize :2, //允许上传图片的最大尺寸，单位M
        callbackFieldName:'saveName',
        before: function () {
            // alert('上传前回调函数');
        },
        success:function(data){
            // alert('上传成功回调函数');
            // console.log(data);
        },
        error:function (e) {
            // alert('上传失败回调函数');
            // console.log(e);
        }
    });

    // 图片上传3
    layui.use(['upload'], function(){
        layui.upload.render({
            elem: '#pic3',
            url: "{:url('File/store')}",
            done: function(res){
                $('#pic3').parent().find('input[name*=pic3]').val(res.data.saveName);
                $('#pic3').parent().find('a').attr('href', res.data.saveName);
                $('#pic3').parent().find('img').attr('src', res.data.saveName);
            }
        });
    });

    // 元素添加删除
    var copy_html = $('.copy_upload').html();
    function add_pic(obj){
        $(obj).before(copy_html);
    }
    function remove_house(obj){
        $(obj).parent().remove();
    }


</script>
{/block}
